﻿<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="css/frame.css" />
<link rel="stylesheet" type="text/css" href="css/desk.css" />
<style type="text/css">

body{
	padding:20px;
}
.even{
	background:#eee;
}
.odd{
	background:#f2f399;
}
.optionsBox{
    height: 50px;
    line-height: 50px;
    background: #ccc;
    margin-bottom:20px;
    padding-left: 20px;
}
.button-bigBlue{
    padding: 5px 20px;
    height: auto;
    background: none repeat scroll 0% 0% #2492EE;
    color: #FFF;
    border: medium none;
    cursor: pointer;
    border-radius: 3px; 
}
</style>

</head>
<body>
    <div class="optionsBox">
        <button id="btn_add" class="button-bigBlue">添加数据</button>
        <button id="btn_insert" class="button-bigBlue">插入数据</button>
        <button id="btn_delete" class="button-bigBlue">删除数据</button>
        <button id="btn_update" class="button-bigBlue">更新数据</button>
        <button id="btn_modify" class="button-bigBlue">通过refresh()更新数据</button>
    </div>

    <div class="desk">
        <div class="app-create fl">
            <div class="app-create-hline"></div>
            <div class="app-create-vline"></div>
            <div class="app-create-text">新增基础服务</div>
        </div>
	    <!--模板 begin-->  
	    <div class="app-myapp fl" title="{{title}}" data-id="{{id}}">
	    	<div class="app-myapp-shared delete"><span>删除</span></div>
	        <div class="app-myapp-shared">{{numbers.app.count}}</div>
	        <div class="app-myapp-photo icons"></div>
	        <div class="app-myapp-caption" click="func()">{{title}}</div>
	        <div class="app-myapp-op">
	            <a target="_blank" href="http://{{url}}">{{url}}</a>
	        </div>
	    </div>
	    <!--模板 end--> 
    </div>

</body>
</html>

<script src="js/jquery.js"></script>
<script src="js/template.js"></script>
<script>
/*
提示：在开发中最好采用命名空间及对象的方式设计
*/

/*数据*/
data = [
        {
        	id:"001",
        	numbers:
        	{
        		app:{count:"100"}
        	},
        	title:"我的应用1",
            url:"www.cnblogs.com/wsoft"
        },
        {
        	id:"002",
        	title:"我的应用2",
            url:"www.flybirdsoft.com/WUI",
            numbers:
            {
                app:{count:"500"}
            }
        },
        {
        	id:"003",
        	title:"我的应用3",
            url:"www.flybirdsoft.com",
            numbers:
            {
                app:{count:"300"}
            }
        }
        ];

//template.useES5GetSet = false;

var modelView = template.repeat({
    repeatElement : $(".app-myapp")[0],
    data : data,
    type : "cover",
    onloadBefore : function(){
        console.log("load before");
    },
    onload : function(){
        console.log("loaded");
    }
});    


modelView.on("click",".delete span",function(e){
	alert(JSON.stringify(this.item));
	modelView.delete({
		"id" : this.item.id
	});
});


/*以下是按钮绑定的事件*/
$("#btn_reLoad").click(function(){
    init();
});
/*更新数据*/
$("#btn_update").click(function(){
    modelView.update({
        "title":"我的应用3"
        },
        {
            title:"xxx",
            url:"WUI",
            numbers:
            {
                app:{count:"00"}
            }
        },
        function(isOK){
            //isOK=true表示更新成功
            alert(isOK);
        }
    );
});

/*删除数据*/
$("#btn_delete").click(function(){
    modelView.delete({
        "title":"我的应用2"
        },
        function(){
            alert('删除成功');
        }
    );
});

/*添加数据*/
$("#btn_add").click(function(){
    modelView.add({
            title:"newTitle",
            url:"www.new.com",
            numbers:
            {
                app:{count:"90"}
            }
        },
        function(){
            alert('添加成功');
        }
    );
});

/*插入数据*/
$("#btn_insert").click(function(){
    modelView.insert(1,{
            title:"newTitle",
            url:"www.new.com",
            numbers:
            {
                app:{count:"90"}
            }
        },
        function(){
            alert('添加成功');
        }
    );
});

/*通过调用refresh()方法更新页面*/
$("#btn_modify").click(function(){
	//modelView.data 是 template.repaat()参数中的data
    //modelView.data[1].title = "this is your app";
    modelView.data[1].url = "url";
    //modelView.data[1].numbers.app.count = "-11";
    //页面已经变化了
    //modelView.refresh();
});

</script>

